<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
*{
    box-sizing: border-box;
}
body>*{
  width: 95%;
  height: auto;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #000;
  padding: 5px;
}
header{
    height: 50px;
}
section{
    height: 300px;
    border: none;
    padding: 0px;
}
footer{
    height: 30px;
}
section>*{
    height: 100%;
    padding: 5px;
    float: left;
    border:1px solid #000 ;
}
aside{
    width: 25%;
}
article{
    width: 74%;
    margin-left: 1%;
}
@media screen and (max-width:575px) {
    aside{
        display: none;
    }
    article{
        width: 100%;
        margin-left: 0px;
    }
}
.logo{
    width:100% ;
    text-align: center;
    margin: 20px 0;
}
.small-image {
    width: 200px; /* 设置图像的宽度为200像素 */
    height: auto; /* 高度自动调整保持比例不变 */
}
    </style>
    <link rel="stylesheet" href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header>
       
    </header>
    <nav>
        <nav class="navbar navba-expand-sm bg-dark navbar-dark">                  
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtop">
                                  <span class="navbar-toggler-icon"></span>
                                </button>
                                  <div class="collapse navbar-collapse" id="navtop"></div>
            <ul class="nav nav-pills">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">首页</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">登录</a>
                        </li>
                        <li>
                            <a href="#">注册</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#menu1" class="nav-link" data-toggle="tab">每日一图</a>
                </li>
                <li class="nav-item">
                    <a href="#menu2" class="nav-link" data-toggle="tab">文章分类</a>
                </li>
                <li class="nav-item">
                    <a href="#menu2" class="nav-link" data-toggle="tab">文章分类</a>
                </li>

            </ul>
    </nav>
    <section>
        <aside>
            <div class="logo">
                <!-- <img src="img/reng.webp" class="small-image" > -->
                <h4>nasa 中文网</h4>
                <p>风景与旅游</p>
            </div>
        </aside>
        <article>文章</article>
    </section>
    <footer>页脚</footer>
    <script src="bootstrap-4.5.0-dist/js/jquery-3.5.1.slim.min.js"></script>
    <script src="bootstrap-4.5.0-dist/js/popper.min.js"></script>
    <script src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</body>
</html>